<template>
  <div class="page gray-page">
    <nav-bar title="事件统计" theme="white" message></nav-bar>
    <div class="list-main page-main" style="margin-top: 44px">
      <div class="event-static">
        <div class="event-static-box">
          <div class="event-static-box-item">
            <p class="color1">{{ eventCount.reportCount }}</p>
            <p>已上报事件</p>
          </div>
          <div class="event-static-box-item">
            <p class="color2">{{ eventCount.disposalIng }}</p>
            <p>处置中任务</p>
          </div>
          <div class="event-static-box-item">
            <p class="color3">{{ eventCount.finishCount }}</p>
            <p>已处置任务</p>
          </div>
          <div class="event-static-box-item item1">
            <p class="color4">{{ eventCount.isTimeOutCount }}</p>
            <p>已超时任务</p>
          </div>
        </div>
      </div>
      <van-field
        readonly
        clickable
        name="timeParam"
        v-model="timeParam"
        label="选择时间"
        placeholder="请选择"
        right-icon="arrow"
        @click="changeShow()"
      />
      <div class="static-title-box">
        <div class="static-title">
          <div class="static-title-left"></div>
          <div class="static-title-center">
            <p>上报事件统计</p>
          </div>
          <div class="static-title-right">
            <p>
              <span class="static-title-right-text">平均日上报事件：</span>
              <span class="static-title-right-num">{{ report.average }}</span>
              条
            </p>
          </div>
        </div>
      </div>
      <div class="static-line" id="region1">
        <LineX :value="report" :color="['226, 133, 1']" :legend="{ show: false }" :dataZoom="regionDataZoom1"></LineX>
      </div>
      <div class="tab-date">
        <div class="tab-date-item" :class="[flag ? 'activity' : '']" @click="changeflag('flag')">全部</div>
        <div class="tab-date-item" :class="[flag1 ? 'activity' : '']" @click="changeflag('flag1')">1-7日</div>
        <div class="tab-date-item" :class="[flag2 ? 'activity' : '']" @click="changeflag('flag2')">8-14日</div>
        <div class="tab-date-item" :class="[flag3 ? 'activity' : '']" @click="changeflag('flag3')">15-21日</div>
        <div class="tab-date-item" :class="[flag4 ? 'activity' : '']" @click="changeflag('flag4')">22-月末</div>
      </div>
      <div class="static-title-box">
        <div class="static-title1">
          <div class="static-title1-left"></div>
          <div class="static-title1-center">
            <p>事件办结统计</p>
          </div>
          <div class="static-title1-right">
            <p>
              <span class="static-title1-right-text">事件处置率：</span>
              <span class="static-title1-right-num">{{ finish.average }}</span>
              %
            </p>
          </div>
        </div>
      </div>
      <div class="static-bar" id="region2">
        <Bar
          :value="finish"
          :barWidth="8"
          :dataZoom="regionDataZoom2"
          :legend="{ show: true, bottom: 0 }"
          :grid="{ top: '5%', left: '3%', right: '5%', bottom: '18%' }"
          :tooltipStyle="{ backgroundColor: '#FFFFFF', borderColor: '#FFFFFF' }"
        ></Bar>
      </div>
      <div class="tab-date">
        <div class="tab-date-item" :class="[flag5 ? 'activity1' : '']" @click="changeflag1('flag5')">全部</div>
        <div class="tab-date-item" :class="[flag6 ? 'activity1' : '']" @click="changeflag1('flag6')">1-7日</div>
        <div class="tab-date-item" :class="[flag7 ? 'activity1' : '']" @click="changeflag1('flag7')">8-14日</div>
        <div class="tab-date-item" :class="[flag8 ? 'activity1' : '']" @click="changeflag1('flag8')">15-21日</div>
        <div class="tab-date-item" :class="[flag9 ? 'activity1' : '']" @click="changeflag1('flag9')">22-月末</div>
      </div>
      <div class="static-title-box">
        <div class="static-title2">
          <div class="static-title2-left"></div>
          <div class="static-title2-center">
            <p>事件办结时长统计</p>
          </div>
          <div class="static-title2-right">
            <p>
              <span class="static-title2-right-text">平均时长：</span>
              <span class="static-title2-right-num">{{ completionTime.average.hours }}</span>
              小时
              <span class="static-title2-right-num">{{ completionTime.average.minutes }}</span>
              分
            </p>
          </div>
        </div>
      </div>
      <div class="static-pie">
        <PieX
          :value="completionTime.list"
          :legendShow="true"
          :length="25"
          :length2="25"
          :legendTop="'0%'"
          :color="['#E7B76F', '#37C2BB', '#3B71DA', '#3CBDD0']"
          :radius="['50%', '70%']"
          roseType="radius"
          :labelShow="true"
          :minShowLabelAngle="0"
          :right="32"
          :top="40"
          :lengthText="false"
        ></PieX>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-datetime-picker
        v-model="currentDate"
        @confirm="confirm"
        @cancel="show = false"
        @change="changeDate"
        type="year-month"
        title="选择年月"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>
<script>
import Event from '@/api/event'
import { LineX, Bar, PieX } from '@/components/Chart'
export default {
  components: {
    LineX,
    Bar,
    PieX
  },
  data() {
    return {
      eventCount: {},
      report: {
        average: ''
      },
      completionTime: {
        average: {
          hours: '',
          minutes: ''
        }
      },
      finish: {},
      timeParam: '',
      currentDate: new Date(),
      show: false,
      formatter: (type, val) => {
        if (type === 'year') {
          return `${val}年`
        } else if (type === 'month') {
          return `${val}月`
        }
      },
      flag: true,
      flag1: false,
      flag2: false,
      flag3: false,
      flag4: false,
      flag5: true,
      flag6: false,
      flag7: false,
      flag8: false,
      flag9: false,
      spliceFlag: 'flag',
      spliceFlag1: 'flag5',
      regionDataZoom1: [
        {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          startValue: 0,
          zoomLock: true,
          endValue: 2
        }
      ],
      regionTimer1: null,
      regionDataZoom2: [
        {
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          startValue: 0,
          zoomLock: true,
          endValue: 2
        }
      ],
      regionTimer2: null
    }
  },
  created() {
    const year = new Date().getFullYear()
    let month = new Date().getMonth() + 1
    if (month >= 1 && month <= 9) {
      month = `0${month}`
    }
    this.timeParam = year + '-' + month
    this.getEventCount()
    this.getReport()
    this.getFinish()
    this.getCompletionTime()
  },
  mounted() {
    this.setRegionDataZoom1()
    document.getElementById('region1').addEventListener('mouseover', () => {
      if (this.regionTimer1) {
        clearInterval(this.regionTimer1)
        this.regionTimer1 = null
      }
    })
    document.getElementById('region1').addEventListener('mouseout', () => {
      this.setRegionDataZoom1()
    })
    this.setRegionDataZoom2()
    document.getElementById('region2').addEventListener('mouseover', () => {
      if (this.regionTimer2) {
        clearInterval(this.regionTimer2)
        this.regionTimer2 = null
      }
    })
    document.getElementById('region2').addEventListener('mouseout', () => {
      this.setRegionDataZoom2()
    })
  },
  methods: {
    setRegionDataZoom1() {
      this.regionTimer1 = setInterval(() => {
        const len = this.report.category.length - 1
        const startValue = this.regionDataZoom1[0].startValue
        const endValue = this.regionDataZoom1[0].endValue
        if (endValue >= len) {
          this.regionDataZoom1[0].startValue = 0
          this.regionDataZoom1[0].endValue = 2
        } else if (startValue < len && startValue + 3 >= len) {
          this.regionDataZoom1[0].startValue += 3
          this.regionDataZoom1[0].endValue = len
        } else {
          this.regionDataZoom1[0].startValue += 3
          this.regionDataZoom1[0].endValue += 3
        }
      }, 3000)
    },
    setRegionDataZoom2() {
      this.regionTimer2 = setInterval(() => {
        const len = this.finish.category.length - 1
        const startValue = this.regionDataZoom2[0].startValue
        const endValue = this.regionDataZoom2[0].endValue
        if (endValue >= len) {
          this.regionDataZoom2[0].startValue = 0
          this.regionDataZoom2[0].endValue = 2
        } else if (startValue < len && startValue + 3 >= len) {
          this.regionDataZoom2[0].startValue += 3
          this.regionDataZoom2[0].endValue = len
        } else {
          this.regionDataZoom2[0].startValue += 3
          this.regionDataZoom2[0].endValue += 3
        }
      }, 3000)
    },
    changeflag(value) {
      this.spliceFlag = value
      this.getReport()
      if (value === 'flag') {
        this.flag = true
        this.flag1 = false
        this.flag2 = false
        this.flag3 = false
        this.flag4 = false
      }
      if (value === 'flag1') {
        this.flag = false
        this.flag1 = true
        this.flag2 = false
        this.flag3 = false
        this.flag4 = false
      }
      if (value === 'flag2') {
        this.flag = false
        this.flag1 = false
        this.flag2 = true
        this.flag3 = false
        this.flag4 = false
      }
      if (value === 'flag3') {
        this.flag = false
        this.flag1 = false
        this.flag2 = false
        this.flag3 = true
        this.flag4 = false
      }
      if (value === 'flag4') {
        this.flag = false
        this.flag1 = false
        this.flag2 = false
        this.flag3 = false
        this.flag4 = true
      }
    },
    changeflag1(value) {
      this.spliceFlag1 = value
      this.getFinish()
      if (value === 'flag5') {
        this.flag5 = true
        this.flag6 = false
        this.flag7 = false
        this.flag8 = false
        this.flag9 = false
      }
      if (value === 'flag6') {
        this.flag5 = false
        this.flag6 = true
        this.flag7 = false
        this.flag8 = false
        this.flag9 = false
      }
      if (value === 'flag7') {
        this.flag5 = false
        this.flag6 = false
        this.flag7 = true
        this.flag8 = false
        this.flag9 = false
      }
      if (value === 'flag8') {
        this.flag5 = false
        this.flag6 = false
        this.flag7 = false
        this.flag8 = true
        this.flag9 = false
      }
      if (value === 'flag9') {
        this.flag5 = false
        this.flag6 = false
        this.flag7 = false
        this.flag8 = false
        this.flag9 = true
      }
    },
    changeDate() {
      this.timeParam = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1)
    },
    confirm(val) {
      const year = val.getFullYear()
      let month = val.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      this.timeParam = year + '-' + month
      this.show = false
      this.getEventCount()
      this.getReport()
      this.getFinish()
      this.getCompletionTime()
    },
    changeShow() {
      this.show = true
    },
    // 事件统计
    getEventCount() {
      Event.Static.eventCount().then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.eventCount = data
        }
      })
    },
    // 获取上报事件统计
    getReport() {
      const data = {
        timeParam: this.timeParam
      }
      Event.Static.report(data).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.report = data
          if (this.spliceFlag === 'flag') {
            this.report.category = this.report.category.slice(0, this.report.category.length)
            this.report.list[0] = this.report.list[0].slice(0, this.report.list[0].length)
          }
          if (this.spliceFlag === 'flag1') {
            this.report.category = this.report.category.slice(0, 7)
            this.report.list[0] = this.report.list[0].slice(0, 7)
          }
          if (this.spliceFlag === 'flag2') {
            this.report.category = this.report.category.slice(7, 14)
            this.report.list[0] = this.report.list[0].slice(7, 14)
          }
          if (this.spliceFlag === 'flag3') {
            this.report.category = this.report.category.slice(14, 21)
            this.report.list[0] = this.report.list[0].slice(14, 21)
          }
          if (this.spliceFlag === 'flag4') {
            this.report.category = this.report.category.slice(21, this.report.category.length)
            this.report.list[0] = this.report.list[0].slice(21, this.report.list[0].length)
          }
        }
      })
    },
    // 获取事件办结统计
    getFinish() {
      const data = {
        timeParam: this.timeParam
      }
      Event.Static.finish(data).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.finish = data
          if (this.spliceFlag1 === 'flag5') {
            this.finish.category = this.finish.category.slice(0, this.finish.category.length)
            this.finish.list[0] = this.finish.list[0].slice(0, this.finish.list[0].length)
          }
          if (this.spliceFlag1 === 'flag6') {
            this.finish.category = this.finish.category.slice(0, 7)
            this.finish.list[0] = this.finish.list[0].slice(0, 7)
          }
          if (this.spliceFlag1 === 'flag7') {
            this.finish.category = this.finish.category.slice(7, 14)
            this.finish.list[0] = this.finish.list[0].slice(7, 14)
          }
          if (this.spliceFlag1 === 'flag8') {
            this.finish.category = this.finish.category.slice(14, 21)
            this.finish.list[0] = this.finish.list[0].slice(14, 21)
          }
          if (this.spliceFlag1 === 'flag9') {
            this.finish.category = this.finish.category.slice(21, this.finish.category.length)
            this.finish.list[0] = this.finish.list[0].slice(21, this.finish.list[0].length)
          }
        }
      })
    },
    // 获取事件处置时长统计
    getCompletionTime() {
      const data = {
        timeParam: this.timeParam
      }
      Event.Static.completionTime(data).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.completionTime = data
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/event/static.less';
</style>
